{% extends 'core/base.html' %}{% load static %}
{% block title %}User Profile - {% endblock %}
{% load crispy_forms_tags %}
{% block header %}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
{% endblock %}
{% block content %}
        <div class="dark-box" id="user-profile">
            <h2 class="visually-hidden">User Profile</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="row mt-3 justify-content-center">
                <div class="col-md-3">
                    <div class="mb-6">
                        <span class="fw-bold">Username:</span>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="mb-6">
                        <span>{{ user.username }}</span>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-3">
                    <div class="mb-6">
                        <span class="fw-bold">Email:</span>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="mb-6">
                        <span><a href="mailto:{{user.email}}?subject=Message from Warehauser">{{ user.email }}</a></span>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-3">
                    <div class="mb-6">
                        <span class="fw-bold">Active:</span>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="mb-6">
                        <span>{{ user.is_active }}</span>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-3">
                    <div class="mb-6">
                        <span class="fw-bold">Superuser:</span>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="mb-6">
                        <span>{{ user.is_superuser }}</span>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-3">
                    <div class="mb-6">
                        <span class="fw-bold">Staff:</span>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="mb-6">
                        <span>{{ user.is_staff }}</span>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <div class="d-grid gap-2 mb-3">
                        <a href="{% url 'auth_change_password_view' %}" class="btn btn-primary">Reset Password</a>
                    </div>
                    <!-- Add more buttons or actions here -->
                </div>
            </div>
        </div>
{% endblock %}